<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@include file="/jsp/commons/header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>销售分析系统</title>
    <link href="${ctx}/resources/css/province-search.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript">
        $(function(){
        	$("#search").button();
        	$(".datepicker").datepicker();
        	$.datepicker.setDefaults({
                monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
                dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
                firstDay: 1, 
                dateFormat: "yy-mm-dd" }
            );
        	$("#search_form").validate({
                 rules:{
                     startDay:{
                         required:true
                	 },
        	         endDay:{
        	             required:true
        	         }
                 },
                 submitHandler: function(form) {
                	 var provinces = "";
                	 $("input:checkbox").each(function(){
                		if($(this).attr("checked")){
                			provinces+=($(this).val()+"#");
                		};
                	 });
                     $("#mainbody").load(
                	     "${ctx}/sales/searchSalesInfo.htm",
                	     {
                	         startDay:$("#startDay").val(),
                	    	 endDay:$("#endDay").val(),
                	    	 provinces:provinces.substring(0, provinces.length-1)
                	     }
                	 );
                 }
            });
        })
    </script>
</head>
<body>
    <div id="content">
        <div id="search_title">
            <form id="search_form" action="${ctx}/sales/searchSalesInfo.htm" method="POST">
                <table id="title_table">
                    <tbody>
                        <tr id="title">
                            <td colspan="2" align="left">销量统计查询<span id="info">(*若不选省份则默认为全国范围)</span></td>
                        </tr>
                        <tr>
                            <td align="right">日期范围:</td>
                            <td align="left">
                                <input class="history-text datepicker" id="startDay" name="startDay">&nbsp;&nbsp;至&nbsp;&nbsp;
                                <input class="history-text datepicker" id="endDay" name="endDay">
                            </td>
                        </tr>
                        <tr id="district" valign="top">
                            <td align="right">地区:</td>
                            <td align="left">
                                <c:forEach items="${provinceNames}" var="name">
                                    <input type="checkbox" id="provices" name="provinces" value="${name}"/>${name} 
                                </c:forEach>
                            </td>
                        </tr>
                    </tbody>        
                </table>
                <div id="submit_button"><input type="submit" value="查询" id="search" ></div>
            </form>
        </div>
        <div id="search_content">
            <table width="90%">
                <tr>
                    <td width="300px" valign="top">
                        <table cellspacing="0px">
                            <tr>
                                <td id="column_border" width="86px">省份</td>
                                <td id="column_border" width="86px">城市</td>
                                <td id="column_border" width="86px">销售额</td>
                            </tr>
                            <c:forEach items="${provincesSalesInfo}" var="info" >
                                <tr>
                                    <td id="column_border" width="86px">${info.key}(${info.value.amount})</td>
                                    <td id="column_border" width="86px">
                                        <c:forEach items="${info.value.items}" var="cityItem">
                                            ${cityItem.cityName}<br/>
                                        </c:forEach>
                                    </td>
                                    <td id="column_border" width="86px">
                                        <c:forEach items="${info.value.items}" var="cityItem">
                                            ${cityItem.salesVolume}<br/>
                                        </c:forEach>
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                    </td>
                    <td align="right">
                        <div><img src="${ctx}/sales/showGraph.htm?name=${name}"></div>
                    </td>
                </tr>
            </table>
            ${message}
        </div>
    </div>
</body>
</html>